@page "/components/modal"

<PageOutlet Url="components/modal"
            Title="Modal"
            Description="modal component of the bit BlazorUI components" />

<DemoPage Name="Modal"
          Description="Modals are temporary pop-ups that take focus from the page or app and require people to interact with them. Unlike a dialog box (Dialog), a modal should be used for hosting lengthy content, such as privacy statements or license agreements, or for asking people to perform complex or multiple actions, such as changing settings."
          Parameters="componentParameters"
          SubClasses="componentSubClasses"
          SubEnums="componentSubEnums"
          GitHubUrl="Surfaces/Modal/BitModal.razor"
          GitHubDemoUrl="Surfaces/Modal/BitModalDemo.razor">
    <DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
        <BitButton OnClick="() => isOpenBasic = true">Open Modal</BitButton>
        <BitModal @bind-IsOpen="isOpenBasic">
            <div style="padding:1rem;max-width:40rem">
                In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits
                to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                shaped into meaning, and the emotions ready to resonate with every reader.
                <br />
                In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and
                each word has the power to transform into something extraordinary. Here lies the start of something new—an
                opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an
                idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey
                begins here, in this quiet moment where everything is possible.
            </div>
        </BitModal>
    </DemoExample>

    <DemoExample Title="Customizing content" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
        <BitButton OnClick="() => isOpenCustomContent = true">Open Modal</BitButton>
        <BitModal @bind-IsOpen="isOpenCustomContent">
            <div class="modal-header">
                <span class="modal-header-text">Story title</span>
                <BitButton Variant="BitVariant.Text" OnClick="() => isOpenCustomContent = false" IconName="@BitIconName.ChromeClose" Title="Close" />
            </div>
            <div class="modal-body">
                Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way.
                <br />
                Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                <br />
                In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits
                to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                shaped into meaning, and the emotions ready to resonate with every reader.
                <br />
                In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and
                each word has the power to transform into something extraordinary. Here lies the start of something new—an
                opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an
                idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey
                begins here, in this quiet moment where everything is possible.
            </div>
        </BitModal>
    </DemoExample>

    <DemoExample Title="Advanced options" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
        <div>BitModal has some advanced options.</div><br />
        <BitButton OnClick="() => isOpenBlocking = true">Open Modal (Blocking)</BitButton>
        <br /><br />
        <BitButton OnClick="() => isOpenAutoToggleScroll = true">Open Modal (AutoToggleScroll)</BitButton>
        <br /><br />
        <BitButton OnClick="() => isOpenModeless = true">Open Modal (Modeless)</BitButton>

        <BitModal @bind-IsOpen="isOpenBlocking" Blocking>
            <div class="modal-header">
                <span class="modal-header-text">Blocking</span>
                <BitButton Variant="BitVariant.Text" OnClick="() => isOpenBlocking = false" IconName="@BitIconName.ChromeClose" Title="Close" />
            </div>
            <div class="modal-body">
                <p>
                    In Blocking mode, the modal won't close by clicking outside (on the overlay).
                </p>
                <br />
                <p>
                    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                    in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                </p>
            </div>
        </BitModal>

        <BitModal @bind-IsOpen="isOpenAutoToggleScroll" AutoToggleScroll ScrollerElement="appShellContainer">
            <div class="modal-header">
                <span class="modal-header-text">AutoToggleScroll</span>
                <BitButton Variant="BitVariant.Text" OnClick="() => isOpenAutoToggleScroll = false" IconName="@BitIconName.ChromeClose" Title="Close" />
            </div>
            <div class="modal-body">
                <p>
                    In AutoToggleScroll mode, the scrollbar of the scroll element
                    (body by default and customizable with the ScrollerSelector parameter)
                    will be removed when the modal opens.
                </p>
                <br />
                <p>
                    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                    in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                </p>
            </div>
        </BitModal>

        <BitModal @bind-IsOpen="isOpenModeless" Modeless>
            <div class="modal-header">
                <span class="modal-header-text">Modeless</span>
                <BitButton Variant="BitVariant.Text" OnClick="() => isOpenModeless = false" IconName="@BitIconName.ChromeClose" Title="Close" />
            </div>
            <div class="modal-body">
                <p>
                    In Modeless mode, the overlay element won't render.
                </p>
                <br />
                <p>
                    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                    in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                </p>
            </div>
        </BitModal>
    </DemoExample>

    <DemoExample Title="Absolute positioning" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
        <div>BitModal has an absolute position option to further customize its location.</div><br />
        <BitButton OnClick="() => isOpenAbsolutePosition = true">Open Modal (AbsolutePosition)</BitButton>
        <br /><br />
        <BitButton OnClick="() => isOpenScrollerSelector = true">Open Modal (ScrollerSelector)</BitButton>
        <br />
        <div class="relative-container">
            <BitModal @bind-IsOpen="isOpenAbsolutePosition" AbsolutePosition Modeless>
                <div class="modal-header">
                    <span class="modal-header-text">AbsolutePosition & Modeless</span>
                    <BitButton Variant="BitVariant.Text" OnClick="() => isOpenAbsolutePosition = false" IconName="@BitIconName.ChromeClose" Title="Close" />
                </div>
                <div class="modal-body">
                    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                    in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                </div>
            </BitModal>

            <BitModal @bind-IsOpen="isOpenScrollerSelector" AutoToggleScroll AbsolutePosition ScrollerSelector=".relative-container">
                <div class="modal-header">
                    <span class="modal-header-text">ScrollerSelector</span>
                    <BitButton Variant="BitVariant.Text" OnClick="() => isOpenScrollerSelector = false" IconName="@BitIconName.ChromeClose" Title="Close" />
                </div>
                <div class="modal-body">
                    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                    in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                </div>
            </BitModal>

            <div>
                Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                for ideas that change minds and spark emotions. This is where the journey begins your words will lead the way.
                <br />
                Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                <br />
                In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits
                to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                shaped into meaning, and the emotions ready to resonate with every reader.
                <br />
                In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and
                each word has the power to transform into something extraordinary. Here lies the start of something new—an
                opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an
                idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey
                begins here, in this quiet moment where everything is possible.
                <br />
                Imagine this space as a window into the future—empty yet alive with the energy of endless possibilities.
                These words stand as temporary guides, placeholders that whisper of what is to come.
                They hold the promise of stories waiting to unfold, ideas eager to take shape, and connections that
                will soon emerge to inspire and resonate. This is not an empty page; it is a canvas, rich with potential
                and ready to transform into something meaningful.
            </div>
        </div>
    </DemoExample>

    <DemoExample Title="Position" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
        <div>To set the modal position on the page you can use the Position parameter.</div><br />
        <div class="position-btn-container">
            <div>
                <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.TopLeft)">Top Left</BitButton>
                <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.TopCenter)">Top Center</BitButton>
                <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.TopRight)">Top Right</BitButton>
            </div>
            <div>
                <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.TopStart)">Top Start</BitButton>
                <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.TopEnd)">Top End</BitButton>
            </div>
            <div>
                <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.CenterLeft)">Center Left</BitButton>
                <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.Center)">Center</BitButton>
                <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.CenterRight)">Center Right</BitButton>
            </div>
            <div>
                <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.CenterStart)">Center Start</BitButton>
                <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.CenterEnd)">Center End</BitButton>
            </div>
            <div>
                <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.BottomLeft)">Bottom Left</BitButton>
                <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.BottomCenter)">Bottom Center</BitButton>
                <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.BottomRight)">Bottom Right</BitButton>
            </div>
            <div>
                <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.BottomStart)">Bottom Start</BitButton>
                <BitButton Class="position-button" OnClick="() => OpenModalInPosition(BitPosition.BottomEnd)">Bottom End</BitButton>
            </div>
        </div>
        <BitModal @bind-IsOpen="isOpenPosition" Position="position">
            <div class="modal-header">
                <span class="modal-header-text">Modal positioning</span>
                <BitButton Variant="BitVariant.Text" OnClick="() => isOpenPosition = false" IconName="@BitIconName.ChromeClose" Title="Close" />
            </div>
            <div class="modal-body">
                BitModal with custom positioning. Once upon a time, stories wove connections between people.
            </div>
        </BitModal>
    </DemoExample>

    <DemoExample Title="Draggable" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
        <div>The Draggable parameter of the BitModal allows users to move the modal around the screen.</div><br />
        <BitButton OnClick="() => isOpenDraggable = true">Open Modal</BitButton>
        <BitModal @bind-IsOpen="isOpenDraggable" Draggable>
            <div class="modal-header">
                <span class="modal-header-text">Draggable Modal</span>
                <BitButton Variant="BitVariant.Text" OnClick="() => isOpenDraggable = false" IconName="@BitIconName.ChromeClose" Title="Close" />
            </div>
            <div class="modal-body">
                Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                are boundless. This space is yours to craft, yours to shape, yours to bring to life.
            </div>
        </BitModal>
        <br /><br /><br /><br />
        <div>Using custom drag element.</div><br />
        <BitButton OnClick="() => isOpenDraggableSelector = true">Open Modal</BitButton>
        <BitModal @bind-IsOpen="isOpenDraggableSelector" Draggable DragElementSelector=".modal-header-drag">
            <div class="modal-header modal-header-drag">
                <span class="modal-header-text">Draggable Modal with custom drag element</span>
                <BitButton Variant="BitVariant.Text" OnClick="() => isOpenDraggableSelector = false" IconName="@BitIconName.ChromeClose" Title="Close" />
            </div>
            <div class="modal-body">
                Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                are boundless. This space is yours to craft, yours to shape, yours to bring to life.
            </div>
        </BitModal>
    </DemoExample>

    <DemoExample Title="FullSize" RazorCode="@example7RazorCode" CSharpCode="@example7CsharpCode" Id="example7">
        <div>The FullSize parameter of the BitModal allows the modal to be full-screen.</div><br />
        <BitButton OnClick="() => isOpenFullSize = true">Open Modal</BitButton>
        <BitModal @bind-IsOpen="isOpenFullSize" FullSize="isFullSize">
            <div class="modal-header">
                <span class="modal-header-text">Full size modal</span>
                <BitButton Variant="BitVariant.Text"
                           OnClick="() => isFullSize = !isFullSize"
                           IconName="@(isFullSize? BitIconName.BackToWindow: BitIconName.ChromeFullScreen)"
                           Title="@(isFullSize ? "Exit FullScreen" : "FullScreen")" />
                <BitButton Variant="BitVariant.Text"
                           OnClick="() => isOpenFullSize = false"
                           IconName="@BitIconName.ChromeClose"
                           Title="Close" />
            </div>
            <div class="modal-body">
                Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                are boundless. This space is yours to craft, yours to shape, yours to bring to life.
            </div>
        </BitModal>
    </DemoExample>

    <DemoExample Title="Events" RazorCode="@example8RazorCode" CSharpCode="@example8CsharpCode" Id="example8">
        <div>Discover different events available in the BitModal component.</div><br />
        <BitButton OnClick="() => isEventsOpen = true">Open Modal</BitButton>
        <br /><br />
        <div>Dismissed? [@isDismissed]</div>
        <br />
        <div>Overlay clicked? [@isOverlayClicked]</div>
        <BitModal @bind-IsOpen="isEventsOpen"
                  Draggable
                  OnDismiss="HandleOnDismiss"
                  OnOverlayClick="HandleOnOverlayClick">
            <div class="modal-header">
                <span class="modal-header-text">Events modal</span>
                <BitButton Title="Close"
                           Variant="BitVariant.Text"
                           OnClick="() => isEventsOpen = false"
                           IconName="@BitIconName.ChromeClose" />
            </div>
            <div class="modal-body">
                Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                are boundless. This space is yours to craft, yours to shape, yours to bring to life.
            </div>
        </BitModal>
    </DemoExample>

    <DemoExample Title="Style & Class" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
        <div>
            <div>Using css related parameter users can further customize the modal based on their needs.</div>
            <br /><br />
            <div>Component's Style & Class:</div><br />
            <BitButton OnClick="() => isOpenStyle = true">Open styled modal</BitButton>
            <br /><br />
            <BitButton OnClick="() => isOpenClass = true">Open classed modal</BitButton>

            <BitModal @bind-IsOpen="isOpenStyle" Style="box-shadow: inset 0px 0px 1.5rem 1.5rem palevioletred;">
                <div class="modal-header">
                    <span class="modal-header-text">Styled modal</span>
                    <BitButton Variant="BitVariant.Text" OnClick="() => isOpenStyle = false" IconName="@BitIconName.ChromeClose" Title="Close" />
                </div>
                <div class="modal-body">
                    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                    in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                </div>
            </BitModal>
            <BitModal @bind-IsOpen="isOpenClass" Class="custom-class">
                <div class="modal-header">
                    <span class="modal-header-text">Classed modal</span>
                    <BitButton Variant="BitVariant.Text" OnClick="() => isOpenClass = false" IconName="@BitIconName.ChromeClose" Title="Close" />
                </div>
                <div class="modal-body">
                    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                    in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                </div>
            </BitModal>

            <br /><br /><br /><br />

            <div><b>Styles</b> & <b>Classes</b>:</div><br />
            <BitButton OnClick="() => isOpenStyles = true">Open modal styles</BitButton>
            <br /><br />
            <BitButton OnClick="() => isOpenClasses = true">Open modal classes</BitButton>

            <BitModal @bind-IsOpen="isOpenStyles" Styles="@(new() { Overlay = "background-color: #4776f433;", Content = "box-shadow: 0 0 1rem tomato;" })">
                <div class="modal-header">
                    <span class="modal-header-text">Modal styles</span>
                    <BitButton Variant="BitVariant.Text" OnClick="() => isOpenStyles = false" IconName="@BitIconName.ChromeClose" Title="Close" />
                </div>
                <div class="modal-body">
                    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                    in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                </div>
            </BitModal>
            <BitModal @bind-IsOpen="isOpenClasses" Classes="@(new() { Root = "custom-root", Overlay = "custom-overlay", Content = "custom-content" })">
                <div class="modal-header">
                    <span class="modal-header-text">Modal classes</span>
                    <BitButton Variant="BitVariant.Text" OnClick="() => isOpenClasses = false" IconName="@BitIconName.ChromeClose" Title="Close" />
                </div>
                <div class="modal-body">
                    Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                    These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                    Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                    inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                    spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                    in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
                    are boundless. This space is yours to craft, yours to shape, yours to bring to life.
                </div>
            </BitModal>
        </div>
    </DemoExample>

    <DemoExample Title="RTL" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
        <div>Use BitModal in right-to-left (RTL).</div><br />
        <BitButton Dir="BitDir.Rtl" OnClick="() => isOpenRtl = true">باز کردن مُدال</BitButton>
        <BitModal Dir="BitDir.Rtl" @bind-IsOpen="isOpenRtl">
            <div class="modal-header">
                <span class="modal-header-text">لورم ایپسوم</span>
                <BitButton Variant="BitVariant.Text" OnClick="() => isOpenRtl = false" IconName="@BitIconName.ChromeClose" Title="Close" />
            </div>
            <div class="modal-body">
                <p>
                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
                    چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
                    کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
                    در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
                </p>
                <p>
                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
                    چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
                    کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
                    در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
                </p>
                <p>
                    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
                    چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
                    کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
                    در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
                </p>
            </div>
        </BitModal>
    </DemoExample>
</DemoPage>
